<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jx.Menu Bar Examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../lib/mootools-core.js"></script>
<script type="text/javascript" src="../../lib/mootools-more.js"></script>
<script type="text/javascript" src="../../lib/jxlib.standalone.uncompressed.js"></script>
<script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
<script src="js/locale.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.addEvent('load', function() {
    menuToolbar();
});
if($(document).getElements('.tabContentActiveExamples').length > 0) {
  $(document).getElements('.tabContentActiveExamples')[0].addEvent('loadAjax', function() {
    menuToolbar();
  });
}
</script>

<script id="menuToolbarScript" type="text/javascript">
function menuToolbar() {
    /* a set of grouped menu items */
    var justifyLeft = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'left'},
        toggle: true,
        imageClass: 'format-justify-left',
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify left');}
    });
    var justifyCenter = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'center'},
        toggle: true,
        imageClass: 'format-justify-center',
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify center');}
    });
    var justifyRight = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'right'},
        toggle: true,
        imageClass: 'format-justify-right',
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify right');}
    });
    var justifyFill = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'fill'},
        toggle: true,
        imageClass: 'format-justify-fill',
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify fill');}
    });
    new Jx.ButtonSet().add(
        justifyLeft, justifyCenter, justifyRight, justifyFill
    );
    
    /* menus in toolbars work pretty much the same way as menu
     * buttons
     */
    new Jx.Toolbar({parent: 'toolbarMenu'}).add(
        new Jx.Menu({label: {set:'Examples',key:'menu',value:'file'}}).add([
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'new'},
                imageClass: 'file-new',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('new file');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'open'},
                imageClass: 'file-open',
                image: 'images/file-edit-menu.png',
                onClick: function() {log(this.getText({set:'Examples',key:'menu',value:'open'}))}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'save'},
                imageClass: 'file-save',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('save file');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'saveAs'},
                imageClass: 'file-save-as',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('save as');}}),
            new Jx.Menu.Separator(),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'print'},
                imageClass: 'file-print',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('print file');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'printPreview'},
                imageClass: 'file-print-preview',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('new file');}}),
            new Jx.Menu.Separator(),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'properties'},
                imageClass: 'file-properties',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('file properties');}})]
        ),
        new Jx.Menu({label: {set:'Examples',key:'menu',value:'edit'}}).add([
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'undo'},
                imageClass: 'edit-undo',
                image: 'images/file-edit-menu.png',
                enabled: false,
                onClick: function() {log('edit undo');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'redo'},
                imageClass: 'edit-redo',
                image: 'images/file-edit-menu.png',
                enabled: false,
                onClick: function() {log('edit redo');}}),
            new Jx.Menu.Separator(),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'cut'},
                imageClass: 'edit-cut',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('edit cut');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'copy'},
                imageClass: 'edit-copy',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('edit copy');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'paste'},
                imageClass: 'edit-paste',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('edit paste');}})]
        ),
        new Jx.Menu({label: {set:'Examples',key:'menu',value:'format'}}).add([
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'intendMore'},
                toggle: true,
                imageClass: 'format-indent-more',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('intend more');}}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'intendLess'},
                toggle: true,
                imageClass: 'format-indent-less',
                image: 'images/file-edit-menu.png',
                onClick: function() {log('intend less');}}),
            new Jx.Menu.SubMenu({label: {set:'Examples',key:'menu',value:'font'}}).add([
                new Jx.Menu.Item({
                    label: {set:'Examples',key:'menu',value:'bold'},
                    toggle: true,
                    imageClass: 'format-text-bold',
                    image: 'images/file-edit-menu.png',
                    onClick: function() {log('format bold');}}),
                new Jx.Menu.Item({
                    label: {set:'Examples',key:'menu',value:'italic'},
                    toggle: true,
                    imageClass: 'format-text-italic',
                    image: 'images/file-edit-menu.png',
                    onClick: function() {log('format italic');}}),
                new Jx.Menu.Item({
                    label: {set:'Examples',key:'menu',value:'strikethrough'},
                    toggle: true,
                    imageClass: 'format-text-strikethrough',
                    image: 'images/file-edit-menu.png',
                    onClick: function() {log('strikethrough');}}),
                new Jx.Menu.Item({
                    label: {set:'Examples',key:'menu',value:'underline'},
                    toggle: true,
                    imageClass: 'format-text-underline',
                    image: 'images/file-edit-menu.png',
                    onClick: function() {log('underline');}})]
            ), 
            new Jx.Menu.SubMenu({label:{set:'Examples',key:'menu',value:'align'}}).add([
                justifyLeft, 
                justifyCenter, 
                justifyRight, 
                justifyFill]
            )]
        )
    );
}
</script>
</head>
<body>

  <h1>Jx.Menu Bar Examples</h1>
  <p>API Reference: <a id="menu-js" href="javascript:void();" title="link to API Reference">Jx.Menu</a>, <a id="menu-submenu-js" href="javascript:void();" title="link to API Reference">Jx.Menu.SubMenu</a>, <a id="menu-item-js" href="javascript:void();" title="link to API Reference">Jx.Menu.Item</a>, <a id="menu-separator-js" href="javascript:void();" title="link to API Reference">Jx.Menu.Separator</a> See Also: <a id="toolbar-js" href="javascript:void();" title="link to API Reference">Jx.Toolbar</a></p>
  <h2 id="menuToolbar">Menus in a Toolbar</h2>
  <p>Menus are typically used with a toolbar to create a menu bar for use in panels, dialogs or just in the layout as shown here.  This menu illustrates several different aspects of using menus in one consolidated example, including menu items, sub menus, toggle menu items, and grouped toggle menu items.</p>
  <div id="toolbarMenu" class="toolbarBox"></div>

</body>
</html>
